<template>
    <div class="peopleLabel-box">
        <div class="peopleLabel-box-title">居民标签</div>
        <div>
            <div v-for="(item, index) in config" :key="index" class="demo-progress">
                <div class="demo-progress-title">{{ item.name }}</div>
                <el-progress :percentage="item.count / props.msg * 100" :format="format" />
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref, onMounted } from 'vue'
import api from '@/api'

const props = defineProps({
    msg: {
        type: Number as () => number,
        required: true
    }
});
console.log(props);

const format = (percentage: any) => (percentage === props.msg ? props.msg : `${percentage / 100 * props.msg}`)
let config = ref<Array<any>>([])


const getPeopleLabelList = async () => {
    const result = await api.Mdatastatistics.getPeopleLabelApi()
    // console.log('peopleLabel', result.data.data);
    config.value = result.data.data
    // console.log('newdata', config.value);
}

onMounted(getPeopleLabelList)


</script>

<style lang='scss' scoped>
.peopleLabel-box {
    width: 340px;
    height: 460px;
    box-sizing: border-box;
    background-color: white;
    padding: 20px;
    // margin-top: 20px;
    border-radius: 6px;

    border: 1px solid #eee;

    .peopleLabel-box-title {
        margin-bottom: 10px;
    }

    .demo-progress {
        line-height: 30px;

        .demo-progress-title {
            font-size: 13px;
            color: #999999;
        }

        .demo-progress .el-progress--line {
            margin-bottom: 15px;
            width: 350px;
        }
    }


}
</style>